import * as React from 'react';
const ClassNames = require('classnames');

interface PlayerProp {
  playing: boolean;
  togglePlay: React.EventHandler<React.MouseEvent<HTMLButtonElement>>;
  stop: React.EventHandler<React.MouseEvent<HTMLButtonElement>>;
  random: React.EventHandler<React.MouseEvent<HTMLButtonElement>>;
  forward: React.EventHandler<React.MouseEvent<HTMLButtonElement>>;
  backward: React.EventHandler<React.MouseEvent<HTMLButtonElement>>;
}

export default class PlayerController extends React.Component<PlayerProp, {}> {
  render() {
    // Dynamic class names with ClassNames
    const playPauseClass = ClassNames({
      'fa fa-play': !this.props.playing,
      'fa fa-pause': this.props.playing
    });
    return (
      <div className="player">
        {/*Rewind Button*/}
        <div className="player__backward">
          <button onClick={this.props.backward}>
            <i className="fa fa-backward" />
          </button>
        </div>
        <div className="player__main">
          {/*Play/Pause Button*/}
          <button onClick={this.props.togglePlay}>
            <i className={playPauseClass} />
          </button>
          {/*Stop Button*/}
          <button onClick={this.props.stop}>
            <i className="fa fa-stop" />
          </button>
          {/*Random Track Button*/}
          <button onClick={this.props.random}>
            <i className="fa fa-random" />
          </button>
        </div>
        {/*Forward Button*/}
        <div className="player__forward">
          <button onClick={this.props.forward}>
            <i className="fa fa-forward" />
          </button>
        </div>
      </div>
    );
  }
}
